<script>
import { defineComponent, getCurrentInstance,ref,reactive } from 'vue'

export default defineComponent({
    setup() {
      const labelPosition = ref('left')
      const formLabelAlign = reactive({
        name: '',
        region: '',
        type: '',
      })
      const {proxy}=getCurrentInstance()
      const showDialog = ref(false);
      const title=ref([])
      const timer =ref(60); //倒计时
      const showTimer = ref(false);
      const taskArray=ref([])
      const dialogVisible = ref(false)
      const benginTimer =() => {
        showTimer.value = true;
        const times = setInterval(() => {
          if (timer.value === 0) {
            clearInterval(times);
            showTimer.value = false;
            timer.value = 60;
            return;
          } else if (showDialog.value) {
            // 弹层关闭 清空倒计时
            timer.value = 60;
            showTimer.value = false;
            return;
          } else {
            timer.value--;
          }
        }, 1000);
      }
      function taskList(){
        proxy.$http.get('/system/task/list')
        .then((res)=>{
          taskArray.value=res.data
          console.log(taskArray.value)
        })
      }
      function dialogChange(data){
        dialogVisible.value=true
        title.value=data
      }
      // function goAnchor(id) {

      //   var anchor = document.getElementById(id);
      //   anchor.scrollIntoView();
      // }
      taskList()
      // benginTimer()
      return{
        timer,
        taskArray,
        dialogVisible,
        title,
        labelPosition,
        formLabelAlign,
        dialogChange
      }
    },
})

</script>

<template>
    <div class="dashboard-wrapper">
      <div class="dashboard-list scrollbar-overlay">
        <el-scrollbar height="400px">
          <div class="dashboard-ref"></div>
          <div class="dashboard-title" id="today">
            今日到期
          </div>
          <ul class="dashboard-ul" v-for="(item,index) in taskArray" :key="index">
            <li class="hvr-trim" style="background-color: #e4e4e4" @click="dialogChange(item)">
              <em class="priority-color" style="background-color: #28ed7d"></em>
              <div class="item-select">
                <i class="iconfont icon-checkbox taskfont"></i>
              </div>
              <div class="item-title">
                <span class="progress">进行中</span>
                <span>+2</span>
                {{item.taskName}}
              </div>
              <el-tooltip
                class="box-item item-icon"
                effect="dark"
                :content=timer
                placement="right"
                tabindex="0"
              >
                <i class="iconfont icon-shizhong taskfont" style="color: #ff9d00;"></i>
              </el-tooltip>
            </li>
          </ul>
          <div class="dashboard-ref"></div>
          <div class="dashboard-title" id="extended">超期任务</div>
          <ul class="dashboard-ul" v-for="(item,index) in taskArray" :key="index">
            <li class="hvr-trim" style="background-color: #e4e4e4" @click="dialogChange(item)">
              <em class="priority-color" style="background-color: rgb(237,64,20)"></em>
              <div class="item-select">
                <i class="iconfont icon-checkbox taskfont"></i>
              </div>
              <div class="item-title">
                <span class="start">待处理</span>
                {{item.taskName}}
              </div>
              <el-tooltip
                class="box-item item-icon"
                effect="dark"
                :content=timer
                placement="right"
                tabindex="0"
              >
                <i class="iconfont icon-shizhong taskfont" style="color: #ff9d00;"></i>
              </el-tooltip>
            </li>
          </ul>
          <div class="dashboard-ref"></div>
          <div class="dashboard-title" id="completed">待完成任务</div>
          <ul class="dashboard-ul" v-for="(item,index) in taskArray" :key="index">
            <li class="hvr-trim" style="background-color: #e4e4e4" @click="dialogChange(item)">
              <em class="priority-color" style="background-color: #0cb2ff"></em>
              <div class="item-select">
                <i class="iconfont icon-checkbox taskfont"></i>
              </div>
              <div class="item-title">
                <span class="test">待测试</span>
                {{item.taskName}}
              </div>
              
              <el-tooltip
                class="box-item item-icon"
                effect="dark"
                :content=timer
                placement="right"
                tabindex="0"
              >
                <i class="iconfont icon-shizhong taskfont" style="color: #ff9d00;"></i>
              </el-tooltip>
            </li>
          </ul>
        </el-scrollbar>
        
      </div>
    </div>
    <el-dialog v-model="dialogVisible" :title=title.taskName width="30%" draggable style="border-radius:6%">
      <el-form
        :label-position="labelPosition"
        label-width="100px"
        :model="formLabelAlign"
        style="max-width: 460px"
      >
        <div class="item-label">
          <i class="iconfont icon-tisheng taskfont"></i>
          <el-form-item label="优先级" class="item-title">
            <span class="tasktitle">1</span>
          </el-form-item>
        </div>
        <div class="item-label">
          <i class="iconfont icon-renyuan taskfont"></i>
          <el-form-item label="负责人" class="item-title">
            <span>1</span>
          </el-form-item>
        </div>
        <div class="item-label">
          <i class="iconfont icon-shizhong taskfont"></i>
          <el-form-item label="截止时间" class="item-title">
            <span>1</span>
          </el-form-item>
        </div>
        <div class="item-label">
          <i class="iconfont icon-jiahao taskfont"></i>
          <el-form-item label="添加协助人员" class="item-title">
            <span>1</span>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
</template>

<style scoped lang="scss">
em {
    font-style: italic;
    
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}
.scrollbar-overlay {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-y: overlay;
}

.dashboard-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.dashboard-wrapper .dashboard-list {
    margin-top: 48px;
    padding-bottom: 6%;
    width: 100%;
}


.dashboard-wrapper .dashboard-list .dashboard-ref {
    height: 0;
}
.dashboard-wrapper .dashboard-list .dashboard-title {
    background-color: #fff;
    font-size: 15px;
    font-weight: 600;
    height: 46px;
    line-height: 46px;
    margin: 0 auto;
    padding: 0 12px;
    position: sticky;
    top: 0;
    z-index: 1;
}
.dashboard-wrapper .dashboard-list .dashboard-ul {
    margin: 0 auto 18px;
    overflow-y: auto;
    padding: 6px 12px 0;
}


.dashboard-wrapper .dashboard-list .dashboard-ul>li .priority-color {
    height: 12px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
}
.dashboard-wrapper .dashboard-list .dashboard-ul>li {
    background: #f9fafb;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    list-style: none;
    margin-bottom: 8px;
    padding: 12px;
    position: relative;
    transition: box-shadow .3s ease-out 0s;
}
.dashboard-wrapper .dashboard-list .dashboard-ul>li .item-select {
    flex-shrink: 0;
    height: 22px;
    line-height: 22px;
    width: 22px;
}

.dashboard-wrapper .dashboard-list .dashboard-ul>li .item-select .taskfont {
    color: #bbb;
    font-size: 18px;
}

// .taskfont {
//     -webkit-font-smoothing: antialiased;
//     -moz-osx-font-smoothing: grayscale;
//     font-family: taskfont,"serif"!important;
//     font-size: 18px;
//     font-style: normal;
// }
.dashboard-wrapper .dashboard-list .dashboard-ul>li .item-title {
    flex: 1;
    line-height: 22px;
    overflow: hidden;
    padding-left: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-wrapper .dashboard-list .dashboard-ul>li .item-title>span {
    border: 1px solid #39a8ed;
    border-radius: 3px;
    color: #39a8ed;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 16px;
    margin-right: 20px;
    margin-top: 3px;
    min-width: 20px;
    padding: 0 2px;
    text-align: center;
    vertical-align: top;
}
.dashboard-wrapper .dashboard-list .dashboard-ul>li .item-title>span.progress {
    background-color: rgba(252,152,75,.1);
    border-color: rgba(252,152,75,.1);
    color: #fc984b;
}
.dashboard-wrapper .dashboard-list .dashboard-ul>li .item-icon {
    align-items: center;
    color: #aaa;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    height: 22px;
    margin-left: 16px;
}
.dashboard-wrapper .dashboard-list .dashboard-ul>li .item-icon>em {
    font-style: normal;
    margin-left: 4px;
}
.dashboard-wrapper .dashboard-list .dashboard-ul>li .item-title>span.start {
    background-color: hsla(0,100%,72%,.1);
    border-color: hsla(0,100%,72%,.1);
    color: #ff7070;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.dashboard-wrapper .dashboard-list .dashboard-ul>li .item-title>span.test {
    background-color: rgba(47,153,236,.1);
    border-color: rgba(47,153,236,.1);
    color: #2f99ec;
}

.task-detail {
    display: flex;
    flex-direction: column;
    margin: 0 -32px 12px -10px;
    min-height: 120px;
    padding: 0 22px 12px 0;
}
.task-detail.open-dialog {
    flex-direction: row;
}
.task-detail .task-info {
    display: flex;
    flex: 3;
    flex-direction: column;
    position: relative;
}
.task-detail.open-dialog .task-info {
    overflow: auto;
}
.task-detail .task-info .scroller {
    margin-left: 28px;
    overflow-x: hidden;
    padding-left: 8px;
    padding-right: 36px;
}
.scrollbar-overlay {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-y: overlay;
}
.task-detail .task-info .scroller .title {
    margin-top: 18px;
}

.item-label {
    vertical-align: middle;
    align-items: center;
    color: #bbb;
    display: flex;
}
.item-label .taskfont {
    margin-right: 4px;
    margin-bottom:20px ;
}
.tasktitle{
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 1;
}
</style>
